<template>
  <div class="searchMusic">
    <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
      <use xlink:href="#icon-zuojiantou"></use>
    </svg>
    <input
      type="text"
      placeholder="邓紫棋"
      v-model="searchKey"
      @keydown.enter="search"
    />
  </div>
  <div class="searchHistory">
    <span class="history">历史</span>
    <div class="left">
      <span
        v-for="item in searchKeyList"
        :key="item"
        class="name"
        @click="searchHistory(item)"
        >{{ item }}</span
      >
    </div>
    <svg class="icon" aria-hidden="true" @click="deleteMusic">
      <use xlink:href="#icon-shanchuanniu"></use>
    </svg>
  </div>
  <div class="content">
    <div
      class="itemSong"
      v-for="(song, index) in searchMusicList"
      :key="song.id"
    >
      <div class="left" @click="playMusic(song)">
        <span>{{ index + 1 }}</span>
        <div class="center">
          <p class="songName">{{ song.name }}</p>
          <p class="authorName">
            <span v-for="auth in song.artists" :key="auth.id">
              {{ auth.name }}
            </span>
          </p>
        </div>
      </div>
      <div class="right">
        <svg class="icon1" aria-hidden="true" v-if="song.mvid != 0">
          <use xlink:href="#icon-24gl-playSquare"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-daohang"></use>
        </svg>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { getSearchMusic } from '@/request/api/home'
import { useStore } from 'vuex'
const searchKey = ref('')
const searchKeyList = ref([])
const searchMusicList = ref([])
const store = useStore()
const playList = computed(() => store.state.playList)
const search = async () => {
  if (searchKeyList.value.includes(searchKey.value)) return
  if (searchKey.value !== '') {
    searchKeyList.value.unshift(searchKey.value)
    if (searchKeyList.value.length > 5) {
      console.log(6)
      searchKeyList.value.splice(5, 1)
      console.log(searchKeyList.value)
    }
    localStorage.setItem('searchKeyList', JSON.stringify(searchKeyList.value))
    const res = await getSearchMusic(searchKey.value)
    console.log(res)
    searchMusicList.value = res.data.result.songs
    searchKey.value = ''
  }
}
const deleteMusic = () => {
  searchKeyList.value = []
  localStorage.removeItem('searchKeyList')
}
const playMusic = (item) => {
  console.log(item)
  if (playList.value.find((song) => song.name === item.name)) return
  item.al = item.album
  item.al.picUrl = item.album.artist.img1v1Url
  item.ar = item.artists
  console.log(searchMusicList.value)
  store.commit('pushplayList', item)
  store.commit('upDateplayListIndex', playList.value.length - 1)
  console.log(playList.value)
}
const searchHistory = async (song) => {
  const res = await getSearchMusic(song)
  console.log(res)
  searchMusicList.value = res.data.result.songs
}
onMounted(() => {
  searchKeyList.value = JSON.parse(localStorage.getItem('searchKeyList'))
    ? JSON.parse(localStorage.getItem('searchKeyList'))
    : []
})
</script>
<style lang='scss' scoped>
.searchMusic {
  display: flex;
  padding: 0.2rem;
  height: 0.8rem;
  justify-content: space-between;
  align-items: center;
  input {
    width: 90%;
    border: none;
    border-bottom: 1px solid #d7d6d7;
  }
}
.searchHistory {
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  .history {
    font-weight: 800;
  }
  .left {
    width: 75%;
    .name {
      display: inline-block;
      padding: 0.1rem;
      border: 1px solid #101da87a;
      border-radius: 0.2rem;
      margin: 0 0.1rem 0.1rem 0;
    }
  }
  .delete {
    button {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0.1rem;
    }
  }
}
.content {
  padding: 0.2rem;
  padding-bottom: 1rem;
  .itemSong {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.2rem;
    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:first-child {
        color: #b9b4b5;
      }
      .center {
        width: 4rem;
        padding: 0.4rem; //超出的文本隐藏
        .songName,
        .authorName {
          overflow: hidden;
          color: #1b1c21;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .authorName {
          margin-top: 0.1rem;
          color: #b9b4b5;
        }
      }
    }
    .right {
      position: relative;
      .icon1 {
        position: absolute;
        left: -40px;
        width: 0.5rem;
        height: 0.5rem;
      }
      .icon {
        width: 0.5rem;
        height: 0.5rem;
        fill: #b0aaaf;
      }
    }
  }
}
</style>
